<template>
	<view>
		<view class="header-stytic">
			<div :style="`height:${statusBarHeight}px;background:#fff`"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('车源信息')}}
			</div>
		</view>
		
		<!-- <view class="mt-20 ml-25 mr-25 titleImgSty"> -->
		<view class="mt-20 ml-25 mr-25 vehicle-item">
			<div v-if="allInfo.image && allInfo.image.length > 0">
				<image :src="allInfo.image.split(',')[0]" mode="aspectFill" class="imageSty"></image>
			</div>
			<div class="center py-50" v-else>
				<u-empty :text="$t('暂无车辆图片')" textSize="28rpx" iconSize="100rpx"></u-empty>
			</div>

			<div class="line-h100 between px-20">
				<p class="text-black fz28 font-bold">{{ get(allInfo, "car_category_name.title") }}</p>
				<div>
					<span v-if="allInfo.status === 1">{{$t('空闲中')}}</span>
					<span v-if="allInfo.status === 2">{{$t('待出发')}}</span>
					<span v-if="allInfo.status === 3">{{$t('进行中')}}</span>
					<span v-if="allInfo.status === 4">{{$t('停用')}}</span>
				</div>
			</div>
		</view>
		<!-- </view> -->
		<view class="info_bor">
			<view class="item">
				<view class="name">
					<!-- 司机名称 -->
					{{$t('运输类型')}}
				</view>
				<view class="info">
					<!-- {{ get(allInfo, "driver.title") }} -->
					{{ modeList.filter(item => item.key == allInfo.mode)[0].title }}
				</view>
			</view>
			<view class="item">
				<view v-if="allInfo.mode == 3" class="name">
					{{$t('航班号')}}
				</view>
				<view v-else-if="allInfo.mode == 4" class="name">
					{{$t('箱号')}}
				</view>
				<view v-else="" class="name">
					{{$t('车号')}}
				</view>
				<view class="carBox">
					<view class="carCard">
						{{ allInfo.car_number }}
						<text v-if="allInfo.trailer_number">{{$t('挂')}}{{ allInfo.trailer_number }}</text>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('载具尺寸')}}(m)
				</view>
				<view class="info">
					{{ allInfo.car_l }} * {{ allInfo.car_w }} * {{ allInfo.car_h }}
					<!-- <view v-for="(item, index) in allInfo.car_l.split(',')" class="">
						{{ get(allInfo, "car_l").split(',')[index] }}m *
						{{ get(allInfo, "car_w").split(',')[index] }}m *
						{{ get(allInfo, "car_h").split(',')[index] }}m
					</view> -->
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('载具容量')}}(m³)
				</view>
				<view class="info">
					{{ allInfo.product_weight || '' }}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('载具载重')}}(t)
				</view>
				<view class="info">
					{{ allInfo.product_volume || '' }}
				</view>
			</view>

			<view class="item">
				<view class="name">
					{{$t('车辆图片')}}
				</view>
				
			</view>
			<view class="item_photo" v-if="allInfo.image">
				<image v-for="item in allInfo.image.split(',')" class="ph" :src="getImageUrl(item)" mode="aspectFill">
				</image>
			</view>
			<div class="text-center text-gray-500 fz22 py-50" v-else>{{$t('暂未上传')}}</div>
			<view class="item">
				<view class="name">
					{{$t('相关证件')}}
				</view>
			</view>
			<view class="item_photo" v-if="allInfo.logo">
				<image v-for="item in allInfo.logo.split(',')" class="ph" :src="getImageUrl(item)" mode="aspectFill">
				</image>
			</view>
			<div class="text-center text-gray-500 fz22 py-50" v-else>{{$t('暂未上传')}}</div>
		</view>
		<view class="info_bor">
			<p class="pt-35 pl-25 fz28 text-111 font-bold">{{$t('主营路线')}}</p>
			<view class="" v-for="(item, index) in allInfo.transport_arr">
				<view class=" mt-20 evenly">
					<view class="cityBox">
						<span class="fz28 text-111 font-bold ml-10">{{ get(item, 'departure_city.name') }}</span>
					</view>
					<image src="/static/icon/darkTransform.png" mode="" class="w-22 h-22"></image>
					<view class="cityBox">
						<span class="fz28 text-111 font-bold ml-10">{{ get(item, 'reach_city.name') }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="empty"></view>
		<view class="footer_btn4" v-if="allInfo.mode==2 && allInfo.status != 4">
			<view v-show="false" class="btn_yellow" @click="submit">
				{{$t('申请绑定')}}
			</view>
			<view class="btn_blue" @click="complete(allInfo)">
				{{$t('联系车主')}}
			</view>
		</view>
		<view class="footer_btn4" v-else>
			<view class="btn_blueLong" @click="complete(allInfo)">
				{{$t('联系')}}TA
			</view>
		</view>
	</view>
</template>

<script>
import { insert_history } from '@/api/basic.js'
import { request_minute } from '@/api/basic'


export default {
	data() {
		return {
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			allInfo: {},
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			modeList: [
				{
					title: this.$t('不限'),
					key: 0
				},
				{
					title: this.$t('其他'),
					key: 1
				},
				{
					title: this.$t('汽运'),
					key: 2
				},
				{
					title: this.$t('空运'),
					key: 3
				},
				{
					title: this.$t('海运'),
					key: 4
				},
				{
					title: this.$t('铁路'),
					key: 5
				},
			]
		}
	},
	onLoad(options) {
		this.allInfo = JSON.parse(options.item)
		console.log('allInfo=====', JSON.parse(JSON.stringify(this.allInfo)));

		this.add_history()

	},
	methods: {
		add_history() {
			insert_history({ user_id: uni.getStorageSync('user_id'), 'type': 1, 'car_id': this.allInfo.id }).then(res => { })
		},
		add_history2() {
			insert_history({ user_id: uni.getStorageSync('user_id'), 'type': 2, 'car_id': this.allInfo.id }).then(res => { })
		},
		back() {
			this.cback()
		},
		submit() {
			var service_user_id = ''
			if (this.allInfo.driver_id) {
				service_user_id = this.allInfo.driver.register_id
			} else {
				service_user_id = this.allInfo.user_id
			}

			uni.navigateTo({
				url: '/pages/bindingCompany/invitedDriver?id=' + service_user_id + '&car_id=' + this.allInfo.id
			})
		},
		complete(allInfo) {
			if(uni.getStorageSync("user_id") == allInfo.user.id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
				
				request_minute({
					user_id: uni.getStorageSync("user_id"),
						target_id: allInfo.user.id
				}).then(res => {
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								// 打电话给司机所在的公司，没绑定公司不让打
								userId: allInfo.user.id,
									type: res.data.data.type || 1,
							}
						})
					} else {
						uni.$u.toast('积分不足，请充值积分')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
							})
						}, 500)
					}
					console.log('res0000', res)
				})
			
			}
		}
	}
}
</script>

<style lang="less">
page {
	background-color: #F6F7FB;
}

.header-stytic {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	background: #fff;
	// padding-top: 18rpx;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.info_bor {
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 0 24rpx 20rpx;

	.item_remark {
		padding-bottom: 15rpx;
	}

	.item_cargo {
		.item_cargo_info {
			height: 88rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			background: #F6F7FB;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 16rpx;

			.ico {
				width: 32rpx;
				height: 38rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
			}

			.text {
				color: #1D1D1D;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
	}

	.carBox {
		// width: 194rpx;
		border-radius: 6px;
		background: #FCCE00;
		margin-left: 20rpx;
		margin-top: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx;

		.carCard {
			padding: 5rpx 10rpx;
			flex-shrink: 0;
			border-radius: 6rpx;
			border: 0.5rpx solid rgba(29, 29, 29, 0.47);
			border-radius: 6rpx;
			// background: #FCCE00;
			color: #1D1D1D;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.cityBox {
		width: 284rpx;
		height: 80rpx;
		border-radius: 500rpx;
		text-align: center;
		background: #F7F7F7;
		line-height: 80rpx;
	}

	.item_photo {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		// align-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		gap: 24rpx;
		padding: 10rpx 0 30rpx;

		.ph {
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
		}
	}

	.item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 18rpx 0;

		.name {
			flex-shrink: 0;
			color: #1D1D1D;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-right: 30rpx;
			font-weight: 600;
		}

		.info {
			color: #535353;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}

	.title {
		color: #1D1D1D;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 28rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin-bottom: 15rpx;
	}
}

.empty {
	width: 100%;
	height: 200rpx;
}

.footer_btn4 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background: #fff;
	padding: 30rpx 24rpx 60rpx;

	.btn_yellow {
		width: 45%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		// border: 2rpx solid rgba(241, 122, 3, 0.10);
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		line-height: 94rpx;
	}

	.btn_blue {
		width: 100%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500px;
		// border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		line-height: 94rpx;
	}
	.btn_blueLong {
		width: 95%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500px;
		// border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		line-height: 94rpx;
	}

	.btn_item {
		text-align: center;
		padding: 0 10rpx;

		.name {
			color: #8C8C8C;
			font-size: 20rpx;
			line-height: 22rpx;
		}
	}

	.ico {
		width: 42rpx;
		height: 42rpx;
	}
}

.vehicle-item {
	position: relative;
	background-color: #fff;
	text-align: center;

	// background-image: url("/static/img/redCar.png");
	// background-size: 100% 100%;
	.imageSty {
		width: 100%;
		height: 350rpx;
		position: relative;
		z-index: 8;
	}

	.status {
		width: 200rpx;
		height: 70rpx;
		position: absolute;
		z-index: 1;
		right: 0rpx;
		top: 6rpx;
		background: linear-gradient(100.15deg, #66D6E2 4%, #278AFF 81.09%);
		border-radius: 0 15rpx 0 0;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		padding-left: 50rpx;
		padding-top: 10rpx;
		font-weight: 500;
	}
}
</style>
